<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>js 飘窗</title>
  </head>

  <style>
    #roll {
      width: 192px;
      padding: 5px;
      border-radius: 5px;
      cursor: pointer;
      color: white;
      /* 渐变 */
      background-image: linear-gradient(135deg, red, yellow);
      /* 阴影 */
      box-shadow: 5px 5px 5px #888888;
      /* 绝对定位 */
      position: fixed;
    }

    #roll p {
      margin: 0px;
    }

    #roll a {
      color: white;
      text-decoration: none;
    }

    #roll .close-btn {
      text-align: right;
    }
  </style>

  <body>
    <!--飘窗-->
    <div id="roll">
      <p id="link">飘窗内容</p>
      <p class="close-btn">
        <span id="close">关闭</span>
      </p>
    </div>

    <script>
      // 创建对象直接量
      var rolls = {
        // 获取id属性为roll的对象
        link: document.getElementById("link"),
        // 获取id属性为roll的对象
        close: document.getElementById("close"),
        // 获取id属性为roll的对象
        roll: document.getElementById("roll"),
        // 初始状态下left属性的值
        x: 100,
        // 初始状态下top属性的值
        y: 300,
        // left变化幅度
        statusX: 1,
        // top变化幅度
        statusY: 1,
        // 定时器执行间隔时间
        speed: 20,
        // 差值用来测算left属性值的极限
        winW:
          document.documentElement.clientWidth -
          document.getElementById("roll").offsetWidth,
        // 差值用来测算top属性值的极限
        winH:
          document.documentElement.clientHeight -
          document.getElementById("roll").offsetHeight,
        // 声明函数
        Go: function () {
          // 设置div的left属性值
          this.roll.style.left = this.x + "px";
          // 设置div的top属性值
          this.roll.style.top = this.y + "px";
          // 如果statusX=1则每次减少1px,否则减少1px
          this.x = this.x + (this.statusX ? -1 : 1);
          // 如果left属性值小于0，也就是div要超出左边界了，就将statusX设置为0
          if (this.x < 0) {
            this.statusX = 0;
          }
          // 如果top属性值大于winW，也就是div要超出右边界了，就将statusX设置为1
          if (this.x > this.winW) {
            this.statusX = 1;
          }

          this.y = this.y + (this.statusY ? -1 : 1);
          if (this.y < 0) {
            this.statusY = 0;
          }
          if (this.y > this.winH) {
            this.statusY = 1;
          }
        },
      };

      var interval = setInterval("rolls.Go()", rolls.speed);
      // onmouseenter属性：鼠标移动到元素上时触发
      rolls.roll.onmouseenter = function () {
        console.log(1);
        clearInterval(interval);
      };
      // onmouseleave属性:鼠标离开元素时触发
      rolls.roll.onmouseleave = function () {
        console.log(2);
        interval = setInterval("rolls.Go()", rolls.speed);
      };
      // 飘窗点击事件
      rolls.link.onclick = function () {
        window.open("https://www.baidu.com/");
      };
      // 关闭飘窗
      rolls.close.onclick = function () {
        // 隐藏或直接移除dom元素
        rolls.roll.style.display = "none";
        // document.body.removeChild(document.getElementById("roll"));
      };
    </script>
  </body>
</html>
